/**
 * Created by willem
 */
import './index.scss';
import { Component } from 'react';
import T from 'utils/T';

import CarouselLeft from './carouselLeft';
import CarouselRight from './carouselRight';


export default class Carousel3d_wheel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                {
                    'name': '天气雷达',
                    'value': 10
                },
                {
                    'name': '微波辐射计',
                    'value': 5
                },
                {
                    'name': '微雨雷达',
                    'value': 3
                },
                {
                    'name': '雷电探测站',
                    'value': 5
                },
                {
                    'name': '风廓线雷达',
                    'value': 2
                },
                {
                    'name': '地面自动站',
                    'value': 2075
                },
                {
                    'name': '土壤水分站',
                    'value': 123
                },
                {
                    'name': 'GNSS/MET站',
                    'value': 11
                },
                {
                    'name': '负氧离子观测站',
                    'value': 9
                },
                {
                    'name': '大气成分站',
                    'value': 15
                }
            ]
        };
        this.CarouselLeft = null;
        this.CarouselRight = null;
        this.timer = null;
    }

    componentDidMount() {
        this.loadData();
    }

    /**
     * 第一次更新数据
     */
    loadData = () => {
        // 分割数据
        let leftData = [], rightData = [];
        const initData = this.state.data;
        if(initData.length > 12){
            leftData = initData.slice(0, Math.round(initData / 2));
            rightData = initData.slice(Math.round(initData / 2));
        }else {
            leftData = T.lodash.take(initData, 6);
            rightData = T.lodash.takeRight(initData, 6);
        }
        console.log(leftData, rightData);
        this.drawCarouselLeft(leftData);
        this.drawCarouselRight(rightData);
    };


    /**
     * 绘制3d轮播图
     * @param data
     */
    drawCarouselLeft(data) {
        if (this.CarouselLeft) clearInterval(this.CarouselLeft.timer);
        this.CarouselLeft = new CarouselLeft($(this.carouselLeftBox), {
            curDisplay: 0,
            autoPlay: true,
            interval: 3000,
            data
        });


    }

    /**
     * 绘制双中心3d轮播图
     * @param data
     */
    drawCarouselRight(data) {
        if (this.CarouselRight) clearInterval(this.CarouselRight.timer);
        this.CarouselRight = new CarouselRight($(this.carouselRightBox), {
            curDisplay: 0,
            autoPlay: true,
            interval: 3000,
            data
        });
    }



    render() {
        return (<div className={'tianshuBox'}>
            <div className={'content'}>
                <div className={'internetThingsBox'}>
                    <div className={'carouselBox'}>
                        <div className={'carouselLeft_box'} ref={e => (this.carouselLeftBox = e)} />
                        <div className={'carouselRight_box'} ref={e => (this.carouselRightBox = e)} />
                        <div className={'centerBg'}>
                            <div />
                            <span>综合观测</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>);
    }
}

